<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>商品详情</title>
    <link rel="stylesheet" href="../css/frozen.css">
    <link rel="stylesheet" href="../css/public.css">
    <script src="../lib/zepto.min.js"></script>
    <script src="../js/frozen.js"></script>
    <style type="text/css">
    .ui-video img {
        display: block;
        width: 100%;
    }
    
    .ui-tab-content {
        margin-top: 0;
    }
    
    .ui-course-brief {
        padding: 10px;
        background: #fff;
    }
    
    .ui-course-brief h3 {
        border-bottom: 1px solid #e0e0e0;
    }
    
    .ui-course-brief h3 a {
        float: right;
    }
    
    .ui-brief-cont,
    .item-discuss {
        background: #fff;
        border-top: 1px solid #e0e0e0;
    }
    
    .ui-course-lists p {
        padding: 10px;
        font-size: 14px;
    }
    
    .ui-course-lists p img {
        display: block;
        margin-right: 10px;
        float: left;
    }
    
    .ui-about-teacher {
        padding: 20px 10px;
    }
    
    .ui-teacher-pic {
        text-align: center;
    }
    
    .ui-teacher-pic img {
        display: block;
        margin: 0 auto;
        margin-top: 30px;
        border-radius: 50%;
        height: 80px;
        width: 80px;
    }
    
    .teacher-brief p {
        padding: 0 10px;
        text-indent: 2em;
    }
    
    .teacher-brief .view-more {
        text-align: center;
        display: block;
        padding: 20px;
    }
    
    .ui-list>li {
        margin-left: 0;
        padding-left: 15px;
    }
    
    .item-discuss .ui-list-info .ui-txt-info {
        color: #999;
    }
    
    .ui-list .ui-border-t {
        border-top: 1px solid #e0e0e0;
    }
    
    .ui-list-thumb span {
        border-radius: 50%;
    }
    
    .ui-add-discuss .ui-btn {
        background: #4cbdff;
        color: #fff;
        border-radius: 16px;
    }
    
    .ui-btn:before,
    .ui-btn-lg:before,
    .ui-btn-s:before {
        border: none;
    }
    .share-tip{
        text-align: center;
        color: #00a5e0;
        padding: 10px;
        font-size: 14px;
    }
    </style>
</head>

<body ontouchstart>
    <section class="ui-container">
        <div class="ui-video">
            <img src="http://placeholder.qiniudn.com/640x200">
        </div>
        <div class="demo-block">
            <div class="ui-tab">
                <ul class="ui-tab-nav ui-border-b">
                    <li class="current">商品简介</li>
                    
                </ul>
                <ul class="ui-tab-content" style="width:100%">
                    <li>
                        <div class="ui-course-brief">
                            <h3>做好分享的5个方法(本节课程)<a>展开<img src=""></a></h3>
                            <div class="ui-course-lists">
                                <p><img src="../img/trangle0.png">如何让你的PPT瞬间高大上</p>
                                <p><img src="../img/trangle0.png">职场小白最应该学的3种方法</p>
                            </div>
                        </div>
                        <div class="ui-brief-cont">
                            <p class="ui-about-teacher">关于老师：</p>
                            <div class="ui-teacher-pic">
                                <img src="http://placeholder.qiniudn.com/100x100">
                                <span>何阳</span>
                            </div>
                            <div class="teacher-brief">
                                <p>何阳，国内知名快速记忆讲师，高效学习专家，世界记忆大师教练快速记忆课程演讲百场以上。</p>
                                <p>
                                    拓普教育忆如反掌课程华东区首席讲师，快速记忆专业授课讲师思维导图专业授课讲师。刘雨，国内知名快速记忆讲师，高效学习专家世界记擅长快速记忆和思维导图课程。技术精湛，授课由浅入深条理清晰，语言深刻；启发式教学，课堂氛围好，活泼而不失条理......
                                </p>
                                <a class="view-more">展开显示更多 ></a>
                            </div>
                            <div class="demo-item item-discuss">
                                <p class="demo-desc">评论&nbsp;&nbsp;(<span>3</span>)</p>
                                <div class="demo-block">
                                    <ul class="ui-list ui-list-one">
                                        <li>
                                            <div class="ui-list-thumb">
                                                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                                            </div>
                                            <div class="ui-list-info">
                                                <h4 class="ui-nowrap">晴天AM-S</h4>
                                                <div class="ui-txt-info">2016-9-10</div>
                                            </div>
                                        </li>
                                        <li>这次我觉得真是没有白来啊</li>
                                        <li class="ui-border-t">
                                            <div class="ui-list-thumb">
                                                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                                            </div>
                                            <div class="ui-list-info">
                                                <h4 class="ui-nowrap">晴天AM-S</h4>
                                                <div class="ui-txt-info">2016-9-10</div>
                                            </div>
                                        </li>
                                        <li>这次我觉得真是没有白来啊</li>
                                    </ul>
                                </div>
                                <div class="demo-block">
                                    <section class="ui-input-wrap ui-add-discuss">
                                        <div class="ui-input ui-border-radius">
                                            $33
                                        </div>
                                        <button class="ui-btn ui-btn-toBuy">立即购买</button>
                                    </section>
                                </div>
                            </div>
                    </li>
                    
                </ul>
                </div>
            </div>
    </section>
    <!-- /.ui-container-->
    <script>
    
    $('.ui-list li,.ui-tiled li').click(function() {
        if ($(this).data('href')) {
            location.href = $(this).data('href');
        }
    });

    Zepto(function($) {

        //商品详情
        BWK.api.lesson.lessonProdectDetail(BWK.UrlParams.id,function(data){
            
            //相关课  enable=true&teacherId=1023
            var teacherId = data.lessonInfo.teacherInfo.id;
            BWK.api.lesson.lesson({'enable':true,teacherId:teacherId},function(data){
                
            });
            
        }); 

        //查询商品评论 target=product&targetId=1042
        BWK.api.lesson.lessonCommentQuery({'target':'product','targetId':BWK.UrlParams.id},function(data){
            var dealObj = data.content||[];
            _dealImgList(dealObj);
        });

        //发表评论 
        var params = {"target": "product", "targetId": BWK.UrlParams.id, "content": "test"};
        BWK.api.lesson.lessonCommentSub(params,function(data){
            var dealObj = data.content||[];
            _dealImgList(dealObj);
        });
         
        $('.ui-btn-toBuy').click(function(){
            location.href = 'lessonProdectDate.html?id='+BWK.UrlParams.id;
        })


    });

    function _dealImgList(obj) {

        $('.ui-slider-content').css({
            width: obj.length * 100 + '%'
        });
        $('.ui-slider-content').empty();
        var str = "";
        if (obj && obj.length > 0) {
            for (var i = 0; i < obj.length; i++) {
                str += '<li><a href="subjectDetail.html?id=' + obj[i].id + '&name=' + obj[i].name + '" ><img src="' + obj[i].image + '"></a></li>';
            }
            $('.ui-slider-content').html(str);

            var slider = new fz.Scroll('.ui-slider', {
                role: 'slider',
                indicator: true,
                autoplay: true,
                interval: 3000
            });
        }

    }
    </script>
</body>

</html>
